<template>
  <div>
    <el-form :inline="true" label-width="100px" :model="formInline" class="demo-form-inline">
      <el-form-item label="筛选当前状态">
        <el-select v-model="formInline.region" placeholder="全部">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="历史数据">
        <el-select v-model="formInline.region" placeholder="全部">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="运动员" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="事由" width="120"></el-table-column>
        <el-table-column prop="name" label="伤病部位" width="120"></el-table-column>
        <el-table-column prop="name" label="受伤时间" width="120"></el-table-column>
        <el-table-column prop="name" label="教练员" width="120"></el-table-column>
        <el-table-column prop="name" label="当前状态" width="120"></el-table-column>
        <el-table-column prop="name" label="历史次数" width="120"></el-table-column>
        
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="harderClick">进入诊断</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      value1: "",

      tableData: [
        {
          name: 1,
        },
      ],
    };
  },
  mounted() {},
  methods:{
    harderClick(){
      // kong zhe jiuxing 
    }
  }
};
</script>
<style scoped>
/* 你自己定义的class 要写在 style scope下面 */
.index {
  height: 100%;
}
.data {
  display: inline-block;
  margin-right: 33px;
  vertical-align: top;
}
.btn {
  display: inline-block;
}
.icon {
  display: inline-block;
  margin-left: 35px;
}
.icon .icon-cire {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background: #fff;
}

.charts-box {
  width: 100%;
  overflow: hidden;
}
#chartLineBox {
  overflow: hidden;
  margin-top: 66px;
}
.icon .newill {
  padding: 7px 15px;
  font-size: 12px;
  /* border-radius: 3px; */
}
</style>
<style>
/* 要修改element自带的样式  就在这写  没有scope中写  一定要指明哪一个下面的按钮等 的样式  不要像下面的这样写
不然的话   会修改所以的 样式
 */
.shang-bing .icon-cire {
  padding: 12px 32px;
}
#pie1,
#pie1 {
  /* display: inline-block; */
}
</style>